<template>
  <el-popover
    placement="top"
    :width="width"
    trigger="click"
    @show="setScrollTop"
    @hide="getScrollTop"
  >
    <el-container>
      <el-main>
        <el-input
          :placeholder="inputTree.placeholder"
          v-model="filterText"
          suffix-icon="el-icon-search"
          clearable
        ></el-input>
        <Tree
          v-if="
            typeof treeDataInterfaceName === 'function' ||
            initTreeData.length > 0
          "
          :treeDataInterfaceName="treeDataInterfaceName"
          :initTreeData="initTreeData"
          ref="tree"
          @change="getSelected"
          @nodeClick="nodeClick"
          v-bind="$attrs"
          :filterText="filterText"
          :checked.sync="checked"
          :inputTree="inputTree"
          :selectedNodes.sync="selectedNodes"
        />
        <!-- @selectAll="getSelectAll" -->
      </el-main>
      <el-footer>
        <el-checkbox
          style="float: left"
          v-model="checked"
          @change="
            (val) => {
              resetChecked(val);
            }
          "
        ></el-checkbox>
        <!-- <tree-checkbox
        style="float: left;margin-left: 0;margin-top: 3px;"
        :checked="checked"
        @change="
            (val) => {
              resetChecked(val);
            }
          "
      /> -->
        <span>{{ selectedNodes.length }} selected</span>
        <i
          class="el-icon-refresh-right"
          style="margin-left: 8px; cursor: pointer; float: right"
          @click="resetChecked(false)"
        ></i>
      </el-footer>
    </el-container>

    <div class="el-cascader" slot="reference">
      <!-- <div class="el-select" style="margin-left: 20px"> -->
      <div class="el-input el-input--suffix">
        <input
          type="text"
          readonly="readonly"
          autocomplete="off"
          placeholder=""
          class="el-input__inner"
          style="height: 40px; width: 500px"
          aria-expanded="false"
        />
        <span class="el-input__suffix">
          <span class="el-input__suffix-inner">
            <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
          </span>
        </span>
      </div>
      <div class="el-select__tags">
        <span
          class="el-tag el-tag--info el-tag--small el-tag--light"
          v-if="selectedNodes.length > 0"
        >
          <span>{{ selectedNodes[0].name }}</span>
          <i
            class="el-tag__close el-icon-close"
            @click.stop="subTags(selectedNodes[0])"
          ></i>
        </span>
        <span
          v-if="selectedNodes.length > 1"
          class="el-tag el-tag--info el-tag--small el-tag--light"
        >
          <span>+ {{ selectedNodes.length - 1 }}</span>
        </span>
      </div>
      <!-- </div> -->
    </div>
  </el-popover>
</template>

<script>
import Tree from "./BigTree";
export default {
  components: { Tree },
  props: {
    // 树的数据
    initTreeData: {
      type: Array,
    },
    inputTree: {
      type: Object,
      require: true,
    },
    // 树数据的接口
    treeDataInterfaceName: {
      type: Function,
    },
  },
  data() {
    return {
      // 弹出框关闭时滚动条位置
      hideScrollTop: 0,
      filterText: "",
      width: "600",
      selectedNodes: [],
      subTagsNode: null,
      checked: false,
      // isSelectAll:true
    };
  },
  mounted() {},
  methods: {
    getSelected(node, status, nodes) {
      // console.log(status);
      // console.log(nodes);
      this.selectedNodes = nodes;

      // console.log("getSelected");
    },
    nodeClick(node, status, nodes) {
      // console.log(node);
      // console.log(status);
      // console.log(nodes);
      this.selectedNodes = nodes;
    },
    subTags(node) {
      if (this.$refs.tree.$refs.nodeContent.single) {
        this.$refs.tree.$refs.nodeContent.setItemSelectBySelected(node);
      } else {
        this.$refs.tree.$refs.nodeContent.selectItem(node);
      }
    },
    // 全选及取消全选
    resetChecked(flag) {
      this.checked = flag;
      this.selectedNodes = this.$refs.tree.clear(flag);
    },
    // 弹出框打开时设置滚动条位置到之前滚动的位置
    setScrollTop() {
      this.$nextTick(() => {
        this.$refs.tree.$refs.viewPort.scrollTop = this.hideScrollTop;
      });
    },
    // 关闭弹出框时记录弹出框滚动位置
    getScrollTop() {
      this.hideScrollTop = this.$refs.tree.$refs.viewPort.scrollTop;
    },
  },
};
</script>

<style>
.el-popover {
  padding-bottom: 5px !important;
}
.el-main {
  padding: 0px !important;
}
.el-footer {
  border-top: 1px solid #e6e8ed;
  padding-top: 4px !important;
  height: unset !important;
  margin: 0 -12px;
}
</style>
